<template>
  <div ref="bottom4_container" style="height:95%">

  </div>
</template>
<script>
import { Column, Pie } from "@antv/g2plot";
export default {
 
  data() {
     return{
       dataArr: [
      {
        type: "儿童",
        sex: "男",
        value: 6700,
      },
      {
        type: "儿童",
        sex: "女",
        value: 5412,
      },
      {
        type: "青少年",
        sex: "男",
        value: 29127,
      },
      {
        type: "青少年",
        sex: "女",
        value: 27865,
      },
      {
        type: "中年",
        sex: "男",
        value: 41129,
      },
      {
        type: "中年",
        sex: "女",
        value: 34860,
      },
      {
        type: "老年",
        sex: "男",
        value: 15938,
      },
      {
        type: "老年",
        sex: "女",
        value: 17045,
      }
    ],
    piedata:[

    ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    getPiedata(){
      const groupData = groupBy(this.dataArr, 'type');
      const result = [];
      each(groupData, (sex, value) => {
        result.push({ type: sex, value: values.reduce((a, b) => a + b.value, 0) });
      });
      this.piedata=result

    },
    
    initChart() {
      const column = new Column(this.$refs.bottom4_container, {
        data:this.dataArr,
        xField: "type",
        yField: "value",
        seriesField: "sex",
        isGroup: "true",
        legend: false,
        columnStyle: {
          radius: [4, 4, 0, 0],
        },
      });

      column.render();
    },
  },
};
</script>
<style scoped>
</style>